<template>
  <canvas ref="canvas" class="absolute top-0 left-0" />
</template>

<script setup lang="ts">
import useCalcBetstore from "@/states/useCalcBetstore";
import { ref, watch } from "vue";
import { CurveCanvas } from "./CurveCanvas";

const canvas = ref<HTMLCanvasElement>();
const { config, calcCurveDate } = defineProps<{
  config: CanvasConfig;
  calcCurveDate: CurveConfigInter[];
}>();

const calcBetStore = useCalcBetstore();

watch(
  [() => calcBetStore.calcBets, () => config],
  () => {
    new CurveCanvas(canvas.value!, config, calcCurveDate).draw();
  },
  { deep: true }
);
</script>
